<template>
  <div>
    <!-- 基本信息区 -->
    <div class="w">
      <div class="title-area">
        <span>项目信息</span>
      </div>
      <div style="position: relative;" class="content-area resourceOptionsPopupContainer" >
        <Descriptions :colnum="2" bordered>
          <DescriptionsItem label="项目编号">
            {{ this.currRow.itemNumber }}
          </DescriptionsItem>
          <DescriptionsItem label="项目名称">
            {{ this.currRow.itemName }}
          </DescriptionsItem>
          <DescriptionsItem label="项目金额">
             {{ this.currRow.itemCost }}
          </DescriptionsItem>
          <DescriptionsItem label="委托单位">
            {{ this.currRow.client }}
          </DescriptionsItem>
          <DescriptionsItem label="开始时间">
            {{ this.currRow.createTime }}
          </DescriptionsItem>
          <DescriptionsItem label="项目描述">
            {{ this.currRow.itemDescribe }}
          </DescriptionsItem>
          <DescriptionsItem label="占用资源" :colspan="2">
            <Select 
              type="multiple" style="width:100%" 
              :getPopupContainer="getResourceOptionsPopupContainer"
              :value="resourceUse" 
              @change="resourcesOnChange" 
              :disabled="currRow.currentStage == '已完成'" 
              :maxTagCount="5"
              allowClear>
              
              <Option v-for="resource in resourceOptions" 
                :key="resource.resourceId" 
                :value="`${resource.resourceId}`" 
                :label="resource.resourceName" 
                :disabled="resource.isInUse && !refData.itemDetail.resourceUse.find(res => res == resource.resourceId)" />
            </Select>
          </DescriptionsItem>
        </Descriptions>
      </div>
    </div>

    <!-- 列表区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>进度填报</span>
      </div>
      <div style="position: relative;" class="content-area itemFinishTimePopupContainer">
        <Table
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :pagination="false">

          <template #render="render">
            <div v-if="render.dataIndex == 'id'">
              {{ render.index + 1 }}
            </div>
            <div v-else-if="render.dataIndex == 'stepName'">
              {{ render.record.solutionStep.stepName }}
            </div>
            <div v-else-if="render.dataIndex == 'remark'">
              {{ render.record.solutionStep.remark }}
            </div>
            <div v-else-if="render.dataIndex == 'itemStepFile'">
                <Upload v-model="render.record.itemStepFile" uploadText="选取文件" :fileType="['doc', 'docx', 'pdf']" :fileSize="100" :limit="1"></Upload>
            </div>
            <div v-else-if="render.dataIndex == 'finishTime'" class="itemFinishTimePopupContainer">
              <DatePicker placeholder="请选择该过程完成时间" mode="date" style="width: 100%" v-model="render.record.finishTime" :getPopupContainer="getItemFinishTimePopupContainer" />
            </div>
          </template>
        </Table>
      </div>
    </div>

    <!-- 表单区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>项目完成</span>
      </div>
      <div class="content-area">
        <Form style="padding-right: 50px;" 
          name="form" 
          ref="formRef" 
          :labelCol="{ span: 8 }" 
          :wrapperCol="{ span: 16 }" 
          :initialValues="form"
          @finish="formFinish">
          
          <Row>
            <Col :span="12">
              <FormItem label="项目报告">
                <Upload uploadText="选取文件" :multiple="false" v-model="itemReportFile" :fileType="['doc','docx','pdf']" :fileSize="100" :limit="1"></Upload>
                <!-- <Button type="link"><Icon name="add-circle" style="margin-top: 4px;" /> 选取文件</Button> -->
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="finishTime" label="完成时间" style="position: relative;" class="finishTimePopupContainer">
                <DatePicker placeholder="请选择完成时间" mode="date" style="width: 100%" :getPopupContainer="getFinishTimePopupContainer"/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem name="remark" label="项目结果描述" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <TextArea placeholder="请输入项目结果描述" style="width: 100%; height: 100px;" />
              </FormItem>
            </Col>
          </Row>
          <Row style="margin-top: 80px;">
            <Col :span="13" :offset="6">
              <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
                <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
                <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>

    <!-- 提交确认框 -->
    <Modal title="提交确认" v-model="isModalVisible" @ok="formSubmit" @cancel="isModalVisible = false" centered>
      <p>即将提交项目进度信息，是否确认？</p>
    </Modal>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import { updateStep, getStep } from "@/api/doitem/itemstep";
import Upload from '@/components/upload'
export default {
  name: "app",
    components: {
    Upload
  },
  props: {
    itemId: {
      type: Number,
      default: 0
    },
    currRow: {
      default: () => {}
    },
    refData: {
      default: () => {}
    }
  },
  data: function () {
    return {
      tableColumns: [
        {"title":"序号", "dataIndex":"id", "key":"id","align":"center", width: 50},
        {"title":"步骤名称", "dataIndex":"stepName", "key":"stepName"},
        {"title":"步骤描述", "dataIndex":"remark", "key":"remark"},
        {"title":"步骤附件", "dataIndex":"itemStepFile", "key":"itemStepFile", "align":"center", width: 400},
        {"title":"完成时间", "dataIndex":"finishTime", "key":"finishTime", width: 220}
      ],
      tableData: this.refData.itemDetail.itemStepList.map(item => {
        item.finishTime = item.finishTime ? dayjs(item.finishTime) : undefined;
        return item;
      }),
      form: {
        ...this.refData.itemDetail,
        finishTime: this.refData.itemDetail.finishTime ? dayjs(this.refData.itemDetail.finishTime) : undefined,
        resourceUse: this.refData.itemDetail.resourceUse.length > 0 ? this.refData.itemDetail.resourceUse.join(',').split(',') : [],
      },
      formRules: {},
      resourceOptions: this.refData.resourceList,
      resourceUse: this.refData.itemDetail.resourceUse.length > 0 ? this.refData.itemDetail.resourceUse.join(',').split(',') : [],
      itemReportFile: null,
      isModalVisible: false
    }
  },
  created: function () {
    // console.log("mounted itemId: ", this.itemId);
    // console.log("mounted currRow: ", this.currRow);
    // console.log("mounted refData: ", this.refData);

    if(this.itemId) {
      getStep(this.itemId).then(response => {
        // console.log("response:", response)
        this.itemReportFile = response.data.itemReportFile?response.data.itemReportFile:''
        this.tableData = response.data.itemStepList.map(item => {
        item.finishTime = item.finishTime ? dayjs(item.finishTime) : undefined;
        return item;
      })
      });
    }
  },
  methods: {
    getResourceOptionsPopupContainer: function () {
      return document.querySelector('.resourceOptionsPopupContainer');
    },
    getItemFinishTimePopupContainer: function () {
      return document.querySelector('.itemFinishTimePopupContainer');
    },
    getFinishTimePopupContainer: function () {
      return document.querySelector('.finishTimePopupContainer');
    },
    resourcesOnChange: function (val) {
      this.resourceUse = val;
    //   console.log("val: ", val);
    },
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.handleCancel();
    },
    formFinish: function (formValues) {
      this.form = formValues;
      // this.isModalVisible = true;
      this.formSubmit();
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = this.$store.state.user.name;
      this.form.updateTime = ruoyi.parseTime(Date.now());

      // 提交表单请求
      this.isModalVisible = false;
      let reqForm = JSON.parse(JSON.stringify(this.form));

      reqForm.itemId = this.itemId;
      reqForm.resourceUse = this.resourceUse;
      reqForm.itemStepList = JSON.parse(JSON.stringify(this.tableData));
      reqForm.itemStepList.forEach((item, index) => {
        let finishTime = this.tableData[index].finishTime;
        item.finishTime = finishTime ? finishTime.format('YYYY-MM-DD')  : ''
      })
      reqForm.finishTime = this.form.finishTime ? this.form.finishTime.format('YYYY-MM-DD')  : '';
      reqForm.itemReportFile = this.itemReportFile
      // console.log("formSubmit: ", reqForm);
      // console.log("tableData: ", this.tableData);

      const rs = await updateStep(reqForm);
      if (rs.code !== 200) return Message.error({ text: '修改项目进度失败：' + rs.msg });
      Message.success({ text: '修改项目进度完成' });
      this.handleCancel();
    },
    handleCancel: function () {
      this.$emit('handleCancel');
    }
  }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    padding-top: 15px;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }
  /* 基本信息区域 */
  .info-row {
    margin-bottom: 20px !important;
  }
  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

